@charset "utf-8";
/* CSS Document */
*{
    margin:0;
    padding:0;
    -webkit-backface-visibility: hidden;
}
body{font-family:"微软雅黑";color:#666;background:#fff;overflow-x:hidden; color:#666;font-size:16px;width:100%; max-width:750px; margin:0 auto;padding:0;}
div,ul,li,dl,dt,dd,tr,table,td,input,textarea,select,h1,h2,h3,h4,p{margin:0; padding:0;}
h1,h2,h3,h4{font-weight:normal;}
input,table,textarea,select{border:0; outline:none; font-family: "Microsoft YaHei"}
select{-webkit-appearance: none;}
input,input[type="submit"],input[type="button"],input[type="radius"],input[type="date"]{-webkit-appearance: none;-webkit-border-radius:0;}
/*@font-face {font-family: "simsun";src:url("../font/simsun.ttc"); src:url("../font/simsun.ttc") format("truetype"),url("../font/simsun.ttc") format("truetype");}*/
ul,li{list-style:none;}
img{border:0;max-width:100%;}
a,div,input,select,textarea{ text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;}
.allbody{width:92%;padding:0 4%;}
.container{
    width:7.5rem;
    overflow:hidden;
    position:relative;
    z-index:1;
}
.hide{display:none;}


.sqbody{
    background:#550dc2;
}
.zcbody{
    background:#dbb50d;
}
.fgbody{
    background:#db244f;
}
.cjheader{
    display:-webkit-box;
    height:45px;
    -webkit-box-align:center;
    background: #fff;
    font-size:18px;
    position:fixed;
    width:100%;
    left:0;
    top:0;
    z-index:10000;
}
.cjheader a {
    display:block;
    -webkit-box-flex:1;
    text-align:center;
    color:#999;
}
.cjheader .cur span{
    color:#333;
}
.cjbanner{
    margin-top:45px;
    width:100%;
}
.cjbanner img{
    width:100%;
    display:block;
}

.cjresult{
    width:100%;
    background: #ff3e71;
    overflow:hidden;
}
.cjsqresult{
    background: #6b1ae4;
}
.cjzcresult{
    background: #e9c31c;
}
.jbox{
    width:6rem;
    margin:15px auto;
    padding-bottom: 15px;
    background:url(../images/resultbg.png) no-repeat center top/6rem;
}
.jbox span{
    display:block;

    margin:0 auto;
}
.jbox .cjmoney2{
    font-size:40px;
    color:#df3121;
    text-align:center;
    border-bottom:1px dashed #df3121;
    height:70px;
    line-height:70px;
    width:5rem;
}
.cjmoney em{
    color:#fff!important;
    font-style:normal;
}
.jbox .cjtip{
    font-size:14px;
    width:5.5rem;
    color:#333;
    line-height:20px;
    margin-top:10px;
    text-align:center;
    display:none;
}
.cjdi{
    background:url(../images/cjdibj.png) no-repeat center top/cover;
    height:auto;
    position:relative;
    top:-60px;
    overflow:hidden;
    padding-bottom:50px;
}
.cjzcdi{
    background:url(../images/zcdibg.png) no-repeat center top/cover;
}
.cjsqdi{
    background:url(../images/sqdibg.png) no-repeat center top/cover;
}
.totalred{
    text-align:center;
}
.totalred>div{
    margin-top:60px;
    background: #fc4c52;
    display:inline-block;
    padding: 15px 15px;
    letter-spacing:3px;
    border-radius:6px;
    box-shadow:0 3px 0px #c71d46;
    color:#8f1431;
    font-size:20px;
}
.cjslidebox{
    height:155px;
    overflow:hidden;
}
.cjslide{
    width:6.5rem;
    margin:40px auto;
    background: #be1940;
    border-radius:6px;
    box-shadow:0 0 6px rgba(255,255,255,0.1);
    padding:8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.cjslide li{
    display:-webkit-box;
    -webkit-box-align:center;
    height:30px;
    border-bottom:1px solid #aa1230;
}
.cjslide li span{
    display:block;
    width:22%;
    font-size:14px;
    text-align:center;
    color:#ff4974;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.cjslide li .cjmoney{
    -webkit-box-flex:1;
}
.cjxz{
    width:6.5rem;
    margin:0 auto;
    color:#8f1431;
}
.cjxz h3{
    font-size:20px;
}
.cjxz p{

    font-size:14px;
    line-height:25px;
}
.cjzcdi .cjxz{
    color:#8d7300;
}
.cjzcdi .cjslide{
    background:#b69a1b;
    box-shadow:0 0 6px rgba(255,255,255,0.3);
}
.cjzcdi .cjslide li{
    border-bottom:1px solid #c3a313;
}
.cjzcdi .cjslide li span{
    color:#e3bc0d;
}

.cjsqdi .cjslide{
    background:#380487;
    box-shadow:0 0 6px rgba(255,255,255,0.3);
}
.cjsqdi .cjslide li{
    border-bottom:1px solid #4d14a4;
}
.cjsqdi .cjslide li span{
    color:#671dd0;
}
.cjsqdi .cjxz{
    color:#310573;
}
.cjkj{
    width:100%;
    position:relative;
    z-index:10;
}
.cjkj img{
    display:block;
    width:100%;
}

@keyframes kjbtnani{
    0%{transform:scale(1,1)}
    10%{transform:scale(1.1,1.1)}
    20%{transform:scale(1,1)}
    30%{transform:scale(1.1,1.1)}
    40%{transform:scale(1,1)}
    100%{transform:scale(1,1)}
}

@-webkit-keyframes kjbtnani{
    0%{transform:scale(1,1)}
    10%{transform:scale(1.1,1.1)}
    20%{transform:scale(1,1)}
    30%{transform:scale(1.1,1.1)}
    40%{transform:scale(1,1)}
    100%{transform:scale(1,1)}
}

.kjbtn{
    animation:kjbtnani;
    -webkit-animation: kjbtnani;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    display:block;
    position:absolute;
    width:80px;
    height:80px;
    bottom:-20px;
    background: #ffdb02;
    left:50%;
    margin-left:-40px;
    border-radius:50%;
    line-height:80px;
    text-align:center;
    color:#ef3359;
    font-size:20px;
    box-shadow:0 -3px 0 0 #e7b330 inset,0 3px 0 #b32143;
}


.kjle.cjresult{
    overflow:visible;
}
.kjle .totalred{
    display:none;

}
.kjle .jbox{
    display:none;
}
.kjle .cjslide{
    margin-top:100px;
}

.cjsqresult .kjbtn{
    box-shadow: 0 -3px 0 0 #e7b330 inset,0 3px 0 #3c0c88;
}
.cjzcresult .kjbtn{
    box-shadow: 0 -3px 0 0 #e7b330 inset,0 3px 0 #b4950b;
}


.sqtotal>div{
    background: #792fe8;
    color:#fff;
    box-shadow: 0 3px 0px #41079a;
}
.zctotal>div{
    background: #ffd000;
    color:#333333;
    box-shadow: 0 3px 0px #ac8e0c;
}
.jbox .cjzcmoney{
    color:#7dc5aa;
}
.jbox .cjsqmoney{
    color:#5b04d2;
}

.kjlabg{
    width:100%;
    height:100%;
    position: fixed;
    left:0;
    top:0;
    background: #5f0c20;
    opacity:0.4;
    z-index:99;
}
.kjlabox{
    width:100%;
    height:100%;
    position: fixed;
    z-index:100;
    left:0;
    top:0;
    display:-webkit-box;
    -webkit-box-align:center;
    -webkit-box-pack:center;
}
.kjladom{
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    width:320px;
    height:400px;
    position:relative;
    z-index:1000;
    transform:scale(0,0)
}

.kjlamoney{
    position:absolute;
    text-align:center;
    width:100%;
    left:0;
    top:130px;
    font-size:26px;
    color:#df3121;
}
.kjlalogo{
    position:absolute;
    top:200px;
    text-align:center;
    width:100%;
    left:0;
}
.kjlalogo img{
    width:80px;
}
.kjlabtn{
    position:absolute;
    display:block;
    bottom:98px;
    background:#fff;
    color:#df3121;
    padding:2px 10px;
    font-weight:bold;
    font-size:20px;
    width:95px;
    text-align:center;
    border-radius:3px;
    left:50%;
    margin-left:-57.5px;

}
.kjlatip{
    font-size:12px;
    width:200px;
    position:absolute;
    top:170px;
    left:50%;
    margin-left:-100px;
    color:#333;
    text-align:center;
}

@media screen and (min-width: 375px) {
    .kjladom{
        width:375px;
    }
    .kjlamoney{
        top:125px;
    }
    .kjlalogo{
        top:190px;
    }
    .kjlalogo img{
        width:100px;
    }
    .kjlatip{
        top:165px;
    }
    .kjlabtn{
        bottom:85px;
    }
}
@media screen and (min-width: 414px) {
    .kjladom{
        width:414px;
    }
    .kjlamoney{
        top:120px;
    }
    .kjlalogo{
        top:180px;
    }
    .kjlatip{
        top:160px;
    }
    .kjlalogo img{
        width:120px;
    }
}

@keyframes showkj{
    0%{transform:scale(0,0); -webkit-transform:scale(0,0)}
    50%{transform:scale(1.1,1.1);-webkit-transform: scale(1.1,1.1);}
    70%{transform:scale(0.8,1.1);-webkit-transform:scale(0.8,1.1)}
    100%{transform:scale(1,1);-webkit-transform:scale(1,1)}
}
@-webkit-keyframes showkj{
    0%{transform:scale(0,0); -webkit-transform:scale(0,0)}
    50%{transform:scale(1.1,1.1);-webkit-transform: scale(1.1,1.1);}
    70%{transform:scale(0.8,1.1);-webkit-transform:scale(0.8,1.1)}
    100%{transform:scale(1,1);-webkit-transform:scale(1,1)}
}


.showkjdom{
    animation:showkj;
    -webkit-animation: showkj;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.showkjbox{
    display:-webkit-box!important;
    opacity:1;
    transition:all 0.5s;
    -webkit-transition:all 0.5s;
}

@keyframes hidekj{
    0%{transform:scale(1,1);-webkit-transform:scale(1,1)}
    20%{transform:scale(0.7,0.7) rotate(0deg);-webkit-transform:scale(0.7,0.7) rotate(0deg)}
    100%{transform:scale(0,0) rotate(1000deg);-webkit-transform:scale(0,0) rotate(1000deg);}
}
@-webkit-keyframes hidekj{
    0%{transform:scale(1,1);-webkit-transform:scale(1,1)}
    20%{transform:scale(0.7,0.7) rotate(0deg);-webkit-transform:scale(0.7,0.7) rotate(0deg)}
    100%{transform:scale(0,0) rotate(1000deg);-webkit-transform:scale(0,0) rotate(1000deg);}
}

.hidekjdom{
    animation:hidekj;
    -webkit-animation: hidekj;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.hidekjbox{
    opacity:0;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
}



@keyframes dropgold{
    0%{top:-50px;}
    100%{top:100%;}
}
@-webkit-keyframes dropgold{
    0%{top:-50px;}
    100%{top:100%;}
}

.dropgold1{
    animation: dropgold;
    -webkit-animation: dropgold;
    animation-duration:0.1s;
    -webkit-animation-duration:0.1s;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;;
}
.dropgold2{
    animation: dropgold;
    -webkit-animation: dropgold;
    animation-duration:1.5s;
    -webkit-animation-duration:1.5s;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;;
}

.dropgold3{
    animation: dropgold;
    -webkit-animation: dropgold;
    animation-duration:1s;
    -webkit-animation-duration:1s;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;;
}

.dropgold4{
    animation: dropgold;
    -webkit-animation: dropgold;
    animation-duration:0.3s;
    -webkit-animation-duration:0.3s;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;;
}
.dropgold5{
    animation: dropgold;
    -webkit-animation: dropgold;
    animation-duration:0.5s;
    -webkit-animation-duration:0.5s;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;;
}

.dropgold6{
    animation: dropgold;
    -webkit-animation: dropgold;
    animation-duration:2s;
    -webkit-animation-duration:2s;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;;
}

.dropgold7{
    animation: dropgold;
    -webkit-animation: dropgold;
    animation-duration:2.5s;
    -webkit-animation-duration:2.5s;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;;
}


.smallgold{
    position:fixed;
    top:-60px;
    z-index:10001000;
}


.popw2 {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10000000;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    display: none;
}
.popwbg2 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.8;
    z-index: 1;
}
.popwboxshow2 {
    -webkit-animation: popwani;
    -moz-animation: popwani;
    animation: popwani;
    -webkit-animation-duration: 0.2s;
    -moz-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.popwbox2 {
    width: 7.1rem;
    height: auto;
    background: #fff;
    border-radius: 4px;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px 0.2rem 0 0.2rem;
    top: -100px;
    opacity: 1;
    z-index: 100000;
}
.popwtitle2 {
    width: 100%;
    height: 50px;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    color: #333;
}
.popwcontent2 {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px 3% 15px 3%;
    line-height: 24px;
    font-size: 16px;
    color: #444;
    text-align:center;
}
.popwcc2 {
    display: -webkit-box;
    width: 7.1rem;
    position: relative;
    left: -0.2rem;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    overflow: hidden;
}
.popwcc2 a {
    display: block;
    -webkit-box-flex: 1;
    border-top: 1px solid #f0f0f0;
    height: 50px;
    font-size: 16px;
    color: #444;
    line-height: 50px;
    text-align: center;
}
.popwcancel2{
    border-right:1px solid #f0f0f0;
}
.popwcc2 .popwcomfirm2{
    color:#0034f7;
}


.hbbox{
    width:100%;
    height:100%;
    position: fixed;
    left:0;
    top:0;
    z-index:100000;
    display:-webkit-box;
    -webkit-box-align:center;
    -webkit-box-pack:center;
}
.hbbg{
    width:100%;
    height:100%;
    position: fixed;
    left:0;
    top:0;
    z-index:0;
    background: #000;
    opacity:0.4;
}
.hbdxk{
    position:absolute;
    width:100%;
    height:100%;
    opacity:10000000;
    top:-50%;
    overflow:hidden;
}
.hbimg{
    position:absolute;
    width:100%;
    left:0;
    top:100%;
    transform:scale(0.5,0.5)
}

@keyframes hbboxmove{
    0%{top:-50%;}
    50%{top:-50%;}
    100%{top:0;}
}

@-webkit-keyframes hbboxmove{
    0%{top:-50%;}
    50%{top:-50%;}
    100%{top:0;}
}
@keyframes hbshow{
    0%{top:100%; transform:scale(0.5,0.5)}
    50%{top:40%; transform:scale(1,1)}
    60%{top:40%; transform:scale(0.5,1.5)}
    70%{top:40%; transform:scale(0.8,1.2)}
    80%{top:40%; transform:scale(1.2,0.5)}
    100%{top:20%; transform:scale(1,1)}
}
@-webkit-keyframes hbshow{
    0%{top:100%; transform:scale(0.5,0.5)}
    50%{top:40%; transform:scale(1,1)}
    60%{top:40%; transform:scale(0.5,1.5)}
    70%{top:40%; transform:scale(0.8,1.2)}
    80%{top:40%; transform:scale(1.2,0.5)}
    100%{top:20%; transform:scale(1,1)}
}

.hbimgshow {
    animation:hbshow;
    -webkit-animation:hbshow;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
}
.hgboxshow{
    animation:hbboxmove;
    -webkit-animation:hbboxmove;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
}
.hbclose{
    display:block;
    position:fixed;
    top:20px;
    right:20px;
    width:30px;
    height:30px;
    background:url(../images/indexhbclose.png) no-repeat center/contain;
    z-index:1000000;
}

@keyframes hbimghideani{
    0%{left:0;top:20%; transform:scale(1,1) rotate(0deg)}
    100%{left:40%;top:50%;transform:scale(0.2,0.2) rotate(3600deg)}
}
@-webkit-keyframes hbimghideani{
    0%{left:0;top:20%; transform:scale(1,1) rotate(0deg)}
    100%{left:40%;top:50%;transform:scale(0.2,0.2) rotate(3600deg)}
}
.hbimghide{
    animation:hbimghideani;
    -webkit-animation:hbimghideani;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
}

@keyframes hbimgshake{
    0%{left:40%;top:50%;transform:scale(0.2,0.2) rotate(0deg)}
    20%{left:40%;top:50%;transform:scale(0.2,0.2) rotate(30deg)}
    40%{left:40%;top:50%;transform:scale(0.2,0.2) rotate(-30deg)}
    60%{left:40%;top:50%;transform:scale(0.2,0.2) rotate(0deg)}
    100%{left:40%;top:50%;transform:scale(0.2,0.2) rotate(0deg)}
}
@-webkit-keyframes hbimgshake{
    0%{left:40%;top:50%;transform:scale(0.2,0.2) rotate(0deg)}
    20%{left:40%;top:50%;transform:scale(0.2,0.2) rotate(30deg)}
    40%{left:40%;top:50%;transform:scale(0.2,0.2) rotate(-30deg)}
    60%{left:40%;top:50%;transform:scale(0.2,0.2) rotate(0deg)}
    100%{left:40%;top:50%;transform:scale(0.2,0.2) rotate(0deg)}
}
.hbimgsmall{
    animation:hbimgshake;
    -webkit-animation:hbimgshake;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes finalhbshake{
    0%{transform:rotate(0deg)}
    20%{transform:rotate(30deg)}
    40%{transform:rotate(-30deg)}
    60%{transform:rotate(0deg)}
    100%{transform:rotate(0deg)}
}
@-webkit-keyframes finalhbshake{
    0%{transform:rotate(0deg)}
    20%{transform:rotate(30deg)}
    40%{transform:rotate(-30deg)}
    60%{transform:rotate(0deg)}
    100%{transform:rotate(0deg)}
}

.finalhb{
    animation:finalhbshake;
    -webkit-animation:finalhbshake;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    width:65px;
    left:80%;
    top:68.5%;
}
.timestillbox{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:100000;
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
}
.timestillbg{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:0;
    background: #000;
    opacity:0.8;
}
.timestill{
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    position:relative;
    z-index:100;
    color:#fff;
    font-size:20px;
    top:-100px;
}
.timestill span{
    display:block;
    background:#f45454;
    padding:8px 10px;
    font-size:30px;
    color:#fff;
    border-radius:4px;
    margin:0 10px;
    letter-spacing:2px;
    text-indent:2px;
    width:44px;
    text-align:center;
}